import React, { Component } from "react";
import { inject, observer } from "mobx-react";

@inject("todoStore")
@observer
class TodoExtra extends Component {
  render() {
    const {
      todos,
      filter,
      changeFilter,
      filterTodosCount,
      clearCompleted,
    } = this.props.todoStore;
    const filterList = ["All", "Active", "Completed"];
    return todos.length ? (
      <footer className="footer">
        <span className="todo-count">
          <strong>{filterTodosCount}</strong> item left
        </span>
        <ul className="filters">
          {filterList.map((name) => (
            <li key={name} onClick={() => changeFilter(name)}>
              <button className={filter === name ? "selected" : ""}>
                {name}
              </button>
            </li>
          ))}
        </ul>
        <button className="clear-completed" onClick={clearCompleted}>
          Clear completed
        </button>
      </footer>
    ) : null;
  }
}

export default TodoExtra;
